<template>
    <!-- 导航区域 -->
    <div>
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>宠物管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 搜索区域 -->
    <div style="margin: 10px 0">
        <el-button type="primary" style="margin-right: 20px;" @click="addopen"><el-icon><Plus /></el-icon>添加宠物</el-button>
        <el-input style="width: 200px; cursor: pointer" suffix-icon="el-icon-search" placeholder="请输入宠物名" v-model="petsname"></el-input>
            <el-select  v-model="petstype" placeholder="请选择宠物种类"  style="width: 12%">
              <el-option v-for="item in petstypeList" :key="item.id" :label="item.typename" :value="item.id">
              </el-option>
            </el-select>
        <el-button type="primary" @click="getpetList">搜 索</el-button>
        <el-button type="warning" @click="reset">重 置</el-button>
    </div>
    <!-- 主体区域 -->
    <el-table :data="petList" border style="width: 100%">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="宠物入库编号" prop="petscode" />
      <el-table-column label="宠物名称" prop="petsname" />
      <el-table-column label="宠物种类">
        <template #default="scope">
          <div v-for="item in petstypeList" :key="item">
            <div v-if="item.id == scope.row.petstypeid">
              {{ item.typename }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="宠物描述" prop="petsdesc" />
      <el-table-column label="性别">
        <template #default="scope">
          <div v-if="scope.row.gender == 1">公</div>
          <div v-else>母</div>
        </template>
      </el-table-column>
      <el-table-column label="宠物年龄(岁)" prop="petsage" />
      <el-table-column label="宠物体重(kg)" prop="petsweight" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">修 改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:current-page="pageNum"
                  :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
      </el-pagination>
    </div>
    <!-- 新增区域 -->
    <el-dialog v-model="dialogVisible" title="宠物信息" width="30%">
      <el-form label-width="70px" size="small">
        <el-form-item label="入库编号" v-if="form.id == null">
          <el-input size="small" v-model="form.petscode" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宠物名称">
          <el-input size="small" v-model="form.petsname" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宠物种类">
          <el-select clearable v-model="form.petstypeid" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in petstypeList" :key="item" :label="item.typename" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宠物描述">
          <el-input v-model="form.petsdesc" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select clearable v-model="form.gender" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in genders" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宠物年龄">
          <el-input v-model="form.petsage" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宠物体重">
          <el-input v-model="form.petsweight" type="text" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script>
    export default{
      name: "PetsView",
      data() {
        return {
          petList: [],
          petstypeList: [],
          dialogVisible: false,
          form: {},
          petsname: "",
          petstype: '',
          pageNum: 1,
          pageSize: 10,
          total: 0,
          genders: [
            {
              value: 0,
              label: "母",
            },
            {
              value: 1,
              label: "公",
            },
          ],
        }
      },
      created() {
        this.getpetList();
        this.getpetstypeList();
      },
      methods:{
        //新增宠物框打开方法
        addopen(){
            this.form = {};
            this.dialogVisible =true;
        },
        //搜索框重置方法
        reset() {
          (this.petsname = ""), (this.petstype = ''), this.getpetList();
        },
        handleSizeChange(pageSize) {
          this.pageSize = pageSize;
          this.getpetList();
        },
        handleCurrentChange(pageNum) {
          this.pageNum = pageNum;
          this.getpetList();
        },
        //修改模态框展开并且获取原本数据方法
        handleEdit(petsid) {
          this.dialogVisible = true;
          this.$http.get("/pets/" + petsid).then((res) => {
            if (res.data.status == 200) {
              this.form = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //删除宠物方法
        handleDelete(petsid) {
          this.$http.delete("/pets/" + petsid).then((res) => {
            if (res.data.status == 200) {
              this.$message.success("删除成功"), 
              this.getpetList();
            } else {
              this.$message.error("删除失败");
            }
          });
        },
        //修改新增宠物方法
        save() {
          this.$http.post("/pets/", this.form).then((res) => {
            if (res.data.status == 200) {
                this.$message.success("保存成功"),
                this.dialogVisible = false,
                this.getpetList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取根据id获取宠物种类
        getpetstypeList() {
          this.$http.get("/petstype").then((res) => {
            console.log(res.data);
            if (res.data.status == 200) {
              this.petstypeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取宠物列表
        getpetList() {
          //请求分页查询数据
          let params = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            petsname: this.petsname,
            petstype: this.petstype,
          };
          this.$http.get("/pets/page", { params }).then((res) => {
            console.log(res);
            if (res.data.status == 200) {
              this.petList = res.data.data.records;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
      }
    }
</script>

<style>
</style>